import React from 'react'
import { useNavigate } from 'react-router-dom'
import {  Switch } from 'antd-mobile'
export default function Message() {
    const navigate = useNavigate()
    return (
        <div>
            <div className="title">
                <span className='time'>9:41</span>
                <span className='time1'>
                    <svg t="1738566636213" className="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2331" width="18" height="18"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="2332"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="2333"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="2334"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="2335"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="2336"></path></svg>
                </span>
                <span className='time2'>
                    <svg t="1738566688517" className="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2497" width="18" height="18"><path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z" p-id="2498" fill="#2c2c2c"></path></svg>
                </span>
                <span className='time3'>
                    <svg t="1738566728107" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4576" width="20" height="20"><path d="M915.264507 446.328301v-65.670675c0-36.264948-28.512381-65.670675-63.681368-65.670675H140.574642c-35.167964 0-63.681368 29.405727-63.681368 65.670675v262.682701c0 36.281321 28.513404 65.670675 63.681368 65.670676h711.00952c35.168987 0 63.681368-29.389354 63.681368-65.670676V577.669652c17.569144 0 31.840172-14.688537 31.840172-32.834826v-65.670675c-0.001023-18.11866-14.272052-32.835849-31.841195-32.83585m-31.841196 197.012026c0 18.148335-14.271028 32.834826-31.841196 32.834826H140.574642c-17.59882 0-31.841196-14.687514-31.841195-32.834826V380.658649c0-18.11866 14.242376-32.834826 31.841195-32.834826h711.00952c17.569144 0 31.840172 14.718213 31.840172 32.834826v262.681678h-0.001023z" fill="#2c2c2c" p-id="4577"></path><path d="M801.112654 643.340327h-610.299817c-28.399817 0-51.421136-23.022343-51.421137-51.421136V430.413843c0-28.399817 23.022343-51.421136 51.421137-51.421136h610.299817c28.399817 0 51.421136 23.022343 51.421136 51.421136v161.504324c0.001023 28.399817-23.02132 51.42216-51.421136 51.42216z" fill="#2c2c2c" p-id="4578"></path></svg>
                </span>
            </div>
            <div className='changjian-text'>
                <span onClick={() => { navigate('/shezhi') }}>
                    <svg t="1738590535521" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10628" width="24" height="24"><path d="M696.743385 224.697665l-315.804981 288.422211 315.804981 288.494461a28.148621 28.148621 0 0 1 0 39.845904c-11.018133 10.945883-28.900021 10.945883-39.954279 0l-336.107246-306.990475c-5.888379-5.888379-8.344881-13.619135-8.019756-21.34989-0.36125-7.658506 2.131377-15.389261 8.019756-21.277641l336.107246-306.990475c11.018133-10.945883 28.900021-10.945883 39.954279 0a28.083596 28.083596 0 0 1 0 39.845905z" fill="#515151" p-id="10629"></path></svg>
                </span>
                <h2>消息通知</h2>
            </div>
            <div className='message-conntent'>
                <div className='message-text'>
                    <span style={{fontSize:"18px"}}>允许新消通知</span>
                    <span><Switch style={{'--checked-color':"gray",'--height':"27px",'--width':"45px"}}/></span>
                </div>
            </div>
            <div className='message-conntent'>
                <div className='message-text'>
                    <span style={{fontSize:"18px"}}>声音提示</span>
                    <span><Switch style={{'--checked-color':"gray",'--height':"27px",'--width':"45px"}}/></span>
                </div>
            </div>
            <div className='message-conntent'>
                <div className='message-text'>
                    <span style={{fontSize:"18px"}}>震动提示</span>
                    <span><Switch style={{'--checked-color':"gray",'--height':"27px",'--width':"45px"}}/></span>
                </div>
            </div>
        </div>
    )
}
